<template>
  <view class="container">
    <form @submit="submitForm" report-submit>
      <!-- 商品名称 -->
      <view class="form-item">
        <text class="label">商品名称 *</text>
        <input 
          type="text" 
          class="input" 
          placeholder="请输入商品名称" 
          v-model="product.name"
          required
        />
      </view>
      
      <!-- 商品价格 -->
      <view class="form-item">
        <text class="label">商品价格 *</text>
        <input 
          type="number" 
          class="input" 
          placeholder="请输入商品价格" 
          v-model="product.price"
          required
        />
      </view>
      
      <!-- 商品图片 -->
      <view class="form-item">
        <text class="label">商品图片</text>
        <view class="upload-area">
          <image 
            :src="product.imageUrl || '/static/images/upload.png'" 
            class="upload-img" 
            mode="widthFix"
            @click="chooseImage"
          ></image>
          <text class="upload-text" v-if="!product.imageUrl">点击上传图片</text>
        </view>
      </view>
      
      <!-- 商品描述 -->
      <view class="form-item">
        <text class="label">商品描述</text>
        <textarea 
          class="textarea" 
          placeholder="请输入商品描述" 
          v-model="product.description"
          rows="4"
        ></textarea>
      </view>
      
      <!-- 商品状态 -->
      <view class="form-item">
        <text class="label">商品状态</text>
        <view class="radio-group">
          <label class="radio-label">
            <radio value="online" v-model="product.status" /> 上架
          </label>
          <label class="radio-label">
            <radio value="offline" v-model="product.status" /> 下架
          </label>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="btn-group">
        <button class="delete-btn" @click="deleteProduct">删除商品</button>
        <button class="cancel-btn" @click="navigateBack">取消</button>
        <button class="submit-btn" form-type="submit">保存修改</button>
      </view>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      product: {
        id: '',
        name: '',
        price: '',
        imageUrl: '',
        description: '',
        status: 'online'
      }
    };
  },
  onLoad(options) {
    // 获取商品ID
    const { id } = options;
    if (id) {
      this.getProductDetail(id);
    } else {
      // 如果没有ID，返回列表页
      uni.navigateBack();
    }
  },
  methods: {
    // 获取商品详情
    getProductDetail(id) {
      const products = uni.getStorageSync('products') || [];
      const product = products.find(item => item.id === id);
      
      if (product) {
        this.product = { ...product };
      } else {
        uni.showToast({
          title: '商品不存在',
          icon: 'none',
          duration: 2000,
          success: () => {
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          }
        });
      }
    },
    
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          this.product.imageUrl = tempFilePaths[0];
        }
      });
    },
    
    // 提交修改
    submitForm() {
      // 表单验证
      if (!this.product.name) {
        uni.showToast({
          title: '请输入商品名称',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      if (!this.product.price || this.product.price <= 0) {
        uni.showToast({
          title: '请输入有效的商品价格',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      // 获取本地存储的商品列表
      let products = uni.getStorageSync('products') || [];
      
      // 找到要修改的商品索引
      const index = products.findIndex(item => item.id === this.product.id);
      
      if (index !== -1) {
        // 更新商品信息
        products[index] = {
          ...products[index],
          name: this.product.name,
          price: parseFloat(this.product.price),
          imageUrl: this.product.imageUrl || '/static/images/default.png',
          description: this.product.description,
          status: this.product.status
        };
        
        // 保存到本地存储
        uni.setStorageSync('products', products);
        
        // 提示用户并返回列表页
        uni.showToast({
          title: '商品修改成功',
          icon: 'success',
          duration: 2000,
          success: () => {
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          }
        });
      }
    },
    
    // 删除商品
    deleteProduct() {
      uni.showModal({
        title: '提示',
        content: '确定要删除这个商品吗？',
        success: (res) => {
          if (res.confirm) {
            // 获取本地存储的商品列表
            let products = uni.getStorageSync('products') || [];
            
            // 过滤掉要删除的商品
            products = products.filter(item => item.id !== this.product.id);
            
            // 保存到本地存储
            uni.setStorageSync('products', products);
            
            // 提示用户并返回列表页
            uni.showToast({
              title: '商品已删除',
              icon: 'success',
              duration: 2000,
              success: () => {
                setTimeout(() => {
                  uni.navigateBack();
                }, 1000);
              }
            });
          }
        }
      });
    },
    
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
/* 复用新增商品页面的样式，并添加删除按钮样式 */
.container {
  padding: 16px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.form-item {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;
}

.label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.input, .textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 4px;
  font-size: 14px;
}

.textarea {
  resize: none;
}

.upload-area {
  position: relative;
}

.upload-img {
  width: 120px;
  height: 120px;
  border: 1px dashed #ccc;
  border-radius: 4px;
}

.upload-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: #999;
  pointer-events: none;
}

.radio-group {
  display: flex;
  gap: 20px;
  padding: 8px 0;
}

.radio-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
}

/* 编辑页面按钮组样式 */
.btn-group {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}

.delete-btn, .cancel-btn, .submit-btn {
  flex: 1;
  height: 48px;
  line-height: 48px;
  border-radius: 8px;
  font-size: 16px;
}

.delete-btn {
  background-color: #f53f3f;
  color: #fff;
}

.cancel-btn {
  background-color: #fff;
  color: #333;
  border: 1px solid #eee;
}

.submit-btn {
  background-color: #007aff;
  color: #fff;
}
</style>
    